/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  Image,
  View
} from 'react-native';

class HelloWorld extends Component {
  render() {
    return (
      <View >
          {/* 1 */}
          <View style={[styles.h160,styles.row]}>
              <View style={[styles.h160,styles.part_1_left]}>
                  <Text style={[styles.font14, styles.marTop18, styles.marLeft10, styles.green]}>我们约吧</Text>
                  <Text style={[styles.font10, styles.marTop14, styles.marLeft10]}>恋爱家人好朋友</Text>
                  <Image source={{uri: 'http://p0.meituan.net/mmc/fe4d2e89827aa829e12e2557ded363a112289.png'}} style={styles.yue} />
              </View>
              <View style={[styles.h160,styles.part_1_right]}>
                  <View style={[styles.row, {flex:1}]}>
                      <View style={{flex:1}}>
                          <Text style={[styles.font14, {marginLeft:30}, styles.red]}>超低价值</Text>
                          <Text style={{fontSize:12, marginTop:14, marginLeft:30,color: 'black'}}>十元惠生活</Text>
                      </View>
                      <View style={[{flex:1}, {marginTop:-13}]}>
                          <Image source={{uri: 'http://p0.meituan.net/mmc/a06d0c5c0a972e784345b2d648b034ec9710.jpg'}} style={[styles.hanbao]} />
                      </View>
                  </View>
                  <View style={[{flex:1, flexDirection: 'row',borderTopWidth:0.5, borderColor:'#DDD8CE'}]}> 
                      <View style={{flex:1, borderRightWidth:1, borderColor:'#DDD8CE',}}>
                          <Text style={{color:'#F742AB', marginLeft:5,fontWeight:'bold', fontSize:15, marginTop:8}}>聚餐宴请</Text>
                          <Text style={{fontSize:12,marginTop:4, marginLeft:5}}>朋友家人常聚聚</Text>
                          <Image style={{height:25,width:25, alignSelf: 'center'}} source={{uri: 'http://p1.meituan.net/mmc/08615b8ae15d03c44cc5eb9bda381cb212714.png'}} />
                      </View>
                      <View style={{flex:1}}>
                          <Text style={[styles.font14,{color:'#FF8601', marginTop:8, marginLeft:5}]}>名店抢购</Text>
                          <Text style={[{marginLeft:5, fontSize:12,marginTop:4,}]}>还有</Text>
                          <Text style={[{marginLeft:5, fontSize:12,marginTop:4,}]}>12:06:18分</Text>
                      </View>
                  </View>
              </View>              
          </View>

          {/* 2 */}
          <View style={[styles.row,styles.part_2]}>
              <View style={{flex:1}} >
                  <Text style={styles.part_2_title} >一元吃大餐</Text>
                  <Text style={styles.part_2_con} >新用户专享</Text>
              </View>    
              <View style={{flex:1}} >
                  <Image style={{height:50, width:120}} source={{uri:'http://p1.meituan.net/280.0/groupop/7f8208b653aa51d2175848168c28aa0b23269.jpg'}} ></Image>
              </View>
          </View>

          {/* 3 */}
          <View >
              <View style={{flexDirection:'row'}}>
                  <View style={[styles.part_3_row,{borderRightWidth:1,borderColor:'#DCD7CD'}]}>
                      <View style={{flex:2}}>
                          <Text style={styles.part_3_row_title}>撸串节狂欢</Text>
                          <Text style={styles.part_3_row_con}>烧烤6.6元起</Text>
                      </View>
                      <View style={{flex:1}}>
                          <Image style={{width:60,height:55}} source={{uri: 'http://p1.meituan.net/280.0/groupop/fd8484743cbeb9c751a00e07573c3df319183.png'}} ></Image>
                      </View>    
                  </View>
                  <View style={styles.part_3_row}>
                      <View style={{flex:2}}>
                          <Text style={styles.part_3_row_title}>毕业旅行</Text>
                          <Text style={styles.part_3_row_con}>选好酒店才安心</Text>
                      </View>
                      <View style={{flex:1}}>
                          <Image style={{width:60,height:55}} source={{uri: 'http://p0.meituan.net/280.0/groupop/ba4422451254f23e117dedb4c6c865fc10596.jpg'}} ></Image>
                      </View>    
                  </View>
              </View>
              <View style={{flexDirection:'row'}}>
                  <View style={[styles.part_3_row,{borderRightWidth:1,borderColor:'#DCD7CD'}]}>
                      <View style={{flex:2}}>
                          <Text style={styles.part_3_row_title}>0元餐来袭</Text>
                          <Text style={styles.part_3_row_con}>免费吃喝玩乐购</Text>
                      </View>
                      <View style={{flex:1}}>
                          <Image style={{width:60,height:55}} source={{uri: 'http://p0.meituan.net/280.0/groupop/6bf3e31d75559df76d50b2d18630a7c726908.png'}} ></Image>
                      </View>    
                  </View>
                  <View style={styles.part_3_row}>
                      <View style={{flex:2}}>
                          <Text style={styles.part_3_row_title}>热门团购</Text>
                          <Text style={styles.part_3_row_con}>大家都在买什么</Text>
                      </View>
                      <View style={{flex:1}}>
                          <Image style={{width:60,height:55}} source={{uri: 'http://p1.meituan.net/mmc/a616a48152a895ddb34ca45bd97bbc9d13050.png'}} ></Image>
                      </View>    
                  </View>
              </View>
          </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
    row:{
        flexDirection: 'row',
        paddingTop:20
    },
    marTop18:{
        marginTop:18,
    },
    marTop14:{
        marginTop:14,
    },
    font14:{
        fontSize:14,
    },
    font10:{
        fontSize:12,
    },
    h160:{
        height: 160,
    },
    yue:{
        height:80,
        marginTop:5,
    },
    green:{
        color:'#55A44B',
        fontWeight: '900'
    },
    red:{
        color: '#FF3F0D',
        fontWeight: '900'
    },
    marLeft10:{
        marginLeft:10,
    },
    part_1_left:{
        flex: 1,
        borderColor: '#DCD7CD',
        borderRightWidth: 0.5,
        borderBottomWidth: 1,
    },
    part_1_right:{
        flex:2,
        borderColor: '#DCD7CD',
        borderBottomWidth: 1,
    },
    part_2:{
        marginTop:40,
        padding:10,
        borderWidth:1,
        borderColor:'#DCD7CD',
    },
    part_2_title:{
        color:'#FF7F60',
        fontSize:16,
        fontWeight:'bold',
    },
    part_2_con:{
        marginTop:10,
        fontSize:14,
    },
    part_3_row:{
        flexDirection:'row',
        flex:1,
        paddingTop:10,
        paddingBottom:10,
    }, 
    part_3_row_title:{
        color:'#FF7F60',
        fontSize:17,
        fontWeight:'bold',
        marginTop:10,
        marginLeft:10,
    },
    part_3_row_con:{
        marginTop:5,
        marginLeft:10,
        fontSize:14,
    },
    hanbao:{
        height:55,
        width:55
    }
  
});

AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
